<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue-router</title>
    <link rel="stylesheet" href="../publicCss/global.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
    <style type="text/css" media="screen">
    #box {
        width: 600px;
        text-align: center;
        height: 400px;
        border: 1px solid black;
        margin: 10px auto;
        font-size: 16px;
    }

    #box ul {
        border-bottom: 1px solid black;
        box-sizing: border-box;

    }

    .tab>li {
        float: left;
        width: 20%;
        height: 50px;
        line-height: 50px;
        font-stretch: 18px;
        text-align: center;
        vertical-align: middle;
        border-right: 1px solid grey;
        box-sizing: border-box;
    }

    .childTab>li{
		float: left;
		box-sizing:border-box;
		height: 350px;
    }
    .childTab .left{
		width: 30%;
		border-right: 1px solid grey;
    }
    .left p{
    	display: block;
    	height: 40px;
    	line-height: 40px;
    	text-align: center;
    	font-size: 16px;
    	border-bottom: 1px solid black;
    }
    .childTab .right{
		width: 70%;
    }
    .child-child ul{
    	border-bottom: 1px solid grey;
    }
    .child-child li{
		float: left;
		width: 33.3333%;
		border-right: 1px solid grey;
		box-sizing: border-right;
		box-sizing: border-box;
		height: 32px;
		line-height: 32px;

    }
    </style>
</head>

<body>
    <div id="box">
        <ul class="clearfix tab">
            <li>
                <router-link to="/item1">普通路由</router-link>
            </li>
            <li>
                <router-link :to="{ name: 'item2', params: { userId: 123 }}">命名路由</router-link>
            </li>
            <li>
                <router-link to="/item3">嵌套路由</router-link>
            </li>
            <li>
                <router-link to="/item/123">动态路由1</router-link>
            </li>
             <li>
                <router-link to="/item/3">动态路由2</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
    <template id="item1">
    	<h1>我是普通路由内容</h1>
    </template>
    <template id="item3">
    	<ul class="clearfix childTab">
    		<li class="left">
    			<p>
    				<router-link to="/item3/child1">子路由1</router-link>
    			</p>
    			<p>
    				<router-link to="/item3/child2">子路由2</router-link>
    			</p>
    			<p>
    				<router-link to="/item3/child3">子路由3</router-link>
    			</p>
    		</li>
    		<li class="right">
    			<router-view></router-view>
    		</li>
    	</ul>
    </template>
    <template id="child3">
    	<ul class="clearfix child-child">
    		<li>
    			<router-link to="/item3/child3/test1">子路由下子路由1</router-link>
    		</li>
    		<li>
    			<router-link to="/item3/child3/test2">子路由下子路由2</router-link>
    		</li>
    		<li>
    			<router-link to="/item3/child3/test3">子路由下子路由3</router-link>
    		</li>
    	</ul>
    	<router-view></router-view>
    </template>
    <script src="../publicJs/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="../publicJs/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../publicJs/vue-router.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../publicJs/require.js"></script>
    <!-- <script type="text/javascript" src='../publicJs/text.js'></script> -->
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>